{% extends 'rebs/layouts/base.html' %}

{% block title %}Rebs - 자금 입출금 내역{% endblock %}

{% block content %}
    {% load static humanize widget_tweaks %}

    <!-- Start Content-->
    <div class="container-fluid">

        <!-- start page title -->
        {% include 'rebs/partials/content_title.html' with  second_bs="현장 자금 관리" title="현장 입출금 내역" %}
        <!-- end page title -->

        <div class="row">
            <form class="form-horizontal p-0 col-12" method="get">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">

                            {% with menu_order='2' %}
                                {% include 'rebs_cash/partials/head_menu_p_cash.html' %}
                            {% endwith %}

                            <div class="row">
                                {% include 'rebs/partials/project_select.html' %}
                                <div class="col-sm-12 col-md-6"></div>
                            </div>

                        </div>
                    </div>
                </div>


                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body pb-1">
                            <div class="form-row">
                                <div class="form-group col-md-2">
                                    <label for="{{ form.sdate.id_for_label }}" class="col-form-label">거래 기간</label>
                                    {{ form.sdate|add_class:"form-control"|attr:"placeholder:시작일"|attr:"data-provide=datepicker data-date-format=yyyy-mm-dd data-date-autoclose=true data-toggle=input-mask data-mask-format=0000-00-00" }}
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="{{ form.edate.id_for_label }}" class="d-none d-md-block col-form-label">&nbsp;</label>
                                    {{ form.edate|add_class:"form-control"|attr:"placeholder:종료일"|attr:"data-provide=datepicker data-date-format=yyyy-mm-dd data-date-autoclose=true data-toggle=input-mask data-mask-format=0000-00-00" }}
                                </div>
                                <div class="form-group col-md-1">
                                    <label for="{{ form.sort.id_for_label }}" class="col-form-label">거래 구분</label>
                                    {{ form.sort|add_class:"form-control" }}
                                </div>
                                <div class="form-group col-md-1">
                                    <label for="{{ form.d1.id_for_label }}" class="d-none d-md-block col-form-label">&nbsp;</label>
                                    <select name="d1" class="form-control" id="id_d1">
                                      <option value="" selected="">---------</option>
                                      {% for d1 in pa_d1 %}
                                          <option value="{{ d1.id }}">{{ d1.name }}</option>
                                      {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group col-md-1">
                                    <label for="{{ form.d2.id_for_label }}" class="d-none d-md-block col-form-label">&nbsp;</label>
                                    <select name="d2" class="form-control" id="id_d2">
                                      <option value="" selected="">---------</option>
                                      {% for d2 in pa_d2 %}
                                          <option value="{{ d2.id }}">{{ d2.name }}</option>
                                      {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="{{ form.bank_acc.id_for_label }}" class="col-form-label">계좌 구분</label>
                                    {{ form.bank_acc|add_class:"form-control" }}
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="{{ form.q.id_for_label }}" class="d-none d-md-block col-form-label">&nbsp;</label>
                                    {{ form.q|add_class:"form-control"|attr:"placeholder:검색어 - 적요, 거래처" }}
                                </div>
                                <div class="form-group col-md-1 pt-1">
                                    <div class="mb-2">&nbsp;</div>
                                    <input type="submit" class="btn btn-info btn-sm btn-block" value="검색">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 table-responsive-md">
                                    <div class="text-right mb-1 mr-2">
                                        <a href="{% url 'excel:p-cashbooks' %}?project={{ this_project.id }}&sdate={{ request.GET.sdate }}&edate={{ request.GET.edate }}&sort={{ request.GET.sort }}&d1={{ request.GET.d1 }}&d2={{ request.GET.d2 }}&bank_acc={{ request.GET.bank_acc }}&q={{ request.GET.q }}">
                                            <i class="mdi mdi-file-excel-box"></i> Excel Export
                                            <i class="mdi mdi-download ml-1"></i>
                                        </a>
                                    </div>
                                    <table id="scroll-horizontal-datatable"
                                           class="table table-hover table-centered table-condensed table-sm w-100 m-0 nowrap"
                                           style="word-break: keep-all;">
                                        <thead>
                                        <tr class="bg-nav-pills">
                                            <th class="text-center" scope="col"><input type="checkbox" disabled></th>
                                            <th class="text-center" scope="col">거래 일자</th>
                                            <th class="text-center" scope="col">구 분</th>
                                            <th class="text-center" scope="col">현장 계정</th>
                                            <th class="text-center" scope="col">현장 세부계정</th>
                                            <th class="text-center" scope="col">적 요</th>
                                            <th class="text-center" scope="col">거 래 처</th>
                                            <th class="text-center" scope="col">거래 계좌</th>
                                            <th class="text-center" scope="col">입금 금액</th>
                                            <th class="text-center" scope="col">출금 금액</th>
                                            <th class="text-center" scope="col">증빙 자료</th>
                                            <th class="text-center" scope="col">
                                                <a href="javascript: void(0);" class="action-icon"><i
                                                        class="mdi mdi-pencil"></i></a>
                                                <a href="javascript: void(0);" class="action-icon"><i
                                                        class="mdi mdi-delete"></i></a>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for inout in object_list %}
                                            <tr class="{% if inout.contract %}bg-info-lighten{% endif %}">
                                                <th class="text-center" scope="row"><input type="checkbox" disabled>
                                                </th>
                                                <td class="text-center">{{ inout.deal_date|date:"Y-m-d" }}</td>
                                                <td class="text-primary">
                                                    <span class="text-{% if inout.cash_category1 == '2' %}danger{% elif inout.cash_category1 == '3' %}info{% endif %}">
                                                        {{ inout.get_cash_category1_display|default:"-" }}
                                                    </span>
                                                </td>
                                                <td>{{ inout.project_account_d1|default:"-" }}</td>
                                                <td>{{ inout.project_account_d2|default:"-" }}</td>
                                                <td>{{ inout.content|truncatechars:12|default:"-" }}</td>
                                                <td>{{ inout.trader|truncatechars:8|default:"-" }}</td>
                                                <td>{{ inout.bank_account }}</td>
                                                <td class="text-right bg-success-lighten">{{ inout.income|floatformat:"0"|intcomma|default:"-" }}</td>
                                                <td class="text-right bg-info-lighten">{{ inout.outlay|floatformat:"0"|intcomma|default:"-" }}</td>
                                                <td class="text-center">{{ inout.get_evidence_display }}</td>
                                                <td class="text-center">
                                                    <a href="javascript: void(0);" class="action-icon"><i
                                                            class="mdi mdi-pencil"></i></a>
                                                    <a href="javascript: void(0);" class="action-icon"><i
                                                            class="mdi mdi-delete"></i></a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            {% if is_paginated %}

                                {# to_first_last :: 맨처음 / 맨끝으로 버튼 사용 여부 #}
                                {# page_class ex:: pagination-rounded pagination-sm pagination-lg justify-content-center justify-content-end #}
                                {% include 'partials/pagination.html' with to_first_last="ok" page_class="pagination-rounded justify-content-end" %}

                            {% endif %}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div> <!-- container -->

{% endblock %}

{% block third_party_js %}

    <script>
      const category1 = document.getElementById('id_sort')
      const pa_d1 = document.getElementById('id_d1')
      const pa_d2 = document.getElementById('id_d2')
      const search_word = document.getElementById('id_q')

      window.onload = function () {
        document.getElementById('id_project_sel').setAttribute('onchange', 'submit()')
        category1.setAttribute('onchange', 'sort_change(this)')
        pa_d1.setAttribute('onchange', 'd1_change(this.form)')

        document.getElementById('id_sdate').value = '{{ request.GET.sdate }}'
        document.getElementById('id_edate').value = '{{ request.GET.edate }}'
        document.getElementById('id_sort').value = '{{ request.GET.sort }}'
        pa_d1.value = '{{ request.GET.d1 }}'
        pa_d2.value = '{{ request.GET.d2 }}'
        document.getElementById('id_bank_acc').value = '{{ request.GET.bank_acc }}'

        search_word.value = '{{ request.GET.q }}'
        search_word.setAttribute('onclick', 'this.value=\'\'')
      }

      function sort_change(sort) {
        if (sort.value === '1') {
            pa_d1.length = '{{ pa_d1_inc.count|add:"1" }}'
            {% for d1 in pa_d1_inc %}
              pa_d1.options[{{ forloop.counter }}].text = "{{ d1.name }}";   //2-1번째 셀렉트바 텍스트 정의
              pa_d1.options[{{ forloop.counter }}].value = "{{ d1.id }}";     //2-1번째 셀렉트바 값 정의
            {% endfor %}
        } else if (sort.value === '2') {
            pa_d1.length = '{{ pa_d1_out.count|add:"1" }}'
            {% for d1 in pa_d1_out %}
              pa_d1.options[{{ forloop.counter }}].text = "{{ d1.name }}";   //2-1번째 셀렉트바 텍스트 정의
              pa_d1.options[{{ forloop.counter }}].value = "{{ d1.id }}";     //2-1번째 셀렉트바 값 정의
            {% endfor %}
        } else {
            pa_d1.length = '{{ pa_d1_trans.count|add:"1" }}'
            {% for d1 in pa_d1_trans %}
              pa_d1.options[{{ forloop.counter }}].text = "{{ d1.name }}";   //2-1번째 셀렉트바 텍스트 정의
              pa_d1.options[{{ forloop.counter }}].value = "{{ d1.id }}";     //2-1번째 셀렉트바 값 정의
            {% endfor %}
        }
      }

      function d1_change(form) {
        pa_d2.options[0].selected = true
        form.submit()
      }
    </script>

{% endblock %}
